﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .jisuan{
            height: 100%;
            /*background: black;*/
        }
        .clearfix:after{
            display:table;
            clear:both;
            content:"";
        }
        .fl{
            float:left;
        }
        .w25{
            width:25%;
        }
        .top{
            height:30%;
            background:black;
            position:relative;
            /*text-align: right;*/
        }
        #d1{
            position:absolute;
            right:20px;
            bottom:0;
            color:black;
            /*padding:20px;*/
            font-size:50px;
        }
        .bottom{
            height:70%;
            color:white;
            font-size:30px;
            margin-top: 227px;
        }
        .btns{
            height:20%;
            
        }
        .btn{
            text-align:center;
            width:93px;
            margin:0;
            height:110px;
            display:flex;
            justify-content:center;
            align-items:center;
            box-sizing:border-box;
            border:1px solid #ccc;
            /*border-radius:100%;*/
            background-color:#666;
        }
        .bg1{
            background: #F5F5F5;
            color:black;

        }
        .bg2{
            background: #007DFF;
            /*height:120px ;*/

        }
        .bg3{
            background: white;
            color:black;
            /*padding-top: -50px;*/
        }

    </style>
    <script>
        function show1(){
            if(d1.innerHTML=="0"){
                d1.innerHTML = "1";
            }else{
                d1.innerHTML = d1.innerHTML + "1";
            }
        }

        function show2(){
            if(d1.innerHTML =="0"){
                d1.innerHTML = "2";
            }else{
                d1.innerHTML = d1.innerHTML + "2";
            }
        }

        function show3(){
            if(d1.innerHTML =="0"){
                d1.innerHTML = "3";
            }else{
                d1.innerHTML = d1.innerHTML + "3";
            }
        }

        var num1;
        var num2;
        var ysf;

        function jia(){
            num1 = parseInt(d1.innerHTML);
            d1.innerHTML = "";
            ysf = "+";
        }

        function cheng(){
            num1 = parseInt(d1.innerHTML);
            d1.innerHTML = "";
            ysf = "*";
        }

        function dengyu(){
            num2 = parseInt(d1.innerHTML);
            if(ysf=="+"){
                d1.innerHTML = num1 + num2;
            }else if(ysf=="*"){
                d1.innerHTML = num1 * num2;
            }
        }
    </script>


</head>
<body>
<div class="jisuan">
    <div class="top">
        <div id="d1">0</div>
    </div>
    <div class="bottom">
        
       
        <div class="btns">
            <div class="btn fl w25 bg3" onclick="show7()">7</div>
            <div class="btn fl w25 bg3" onclick="show8()">8</div>
            <div class="btn fl w25 bg3" onclick="show9()">9</div>
            <div class="btn fl w25 bg1">-</div>
        </div>
        <div class="btns">
            <div class="btn fl w25 bg3" onclick="show4()">4</div>
            <div class="btn fl w25 bg3" onclick="show5()">5</div>
            <div class="btn fl w25 bg3" onclick="show6()">6</div>
            <div class="btn fl w25 bg1" onclick="jia()">+</div>
        </div>
        <div class="btns">
            <div class="btn fl w25 bg3" onclick="show1()">1</div>
            <div class="btn fl w25 bg3" onclick="show2()">2</div>
            <div class="btn fl w25 bg3" onclick="show3()">3</div>
            <div class="btn fl w25  bg2"onclick="dengyu()" >=</div>
        </div>
        <div class="btns">
            <div class="btn fl w25 bg3">.</div>
            <div class="btn fl w25 bg3">0</div>
            <div class="btn fl w25 bg3">删除</div>

        </div>

    </div>


</div>


</body>
</html>